import React, { useEffect, useState } from 'react';
import {View, StyleSheet, TouchableOpacity} from 'react-native';
import { WebView } from 'react-native-webview';
import AntDesign from "@expo/vector-icons/AntDesign";
import {Stack, useLocalSearchParams, useRouter} from "expo-router";
import {getSpaceVideoListByIdRequest} from "@/services/spaceServices";
import Empty from "@/components/empty";

const App = () => {
    const router = useRouter();

    const routerParams = useLocalSearchParams();
    const [videoUrl, setVideoUrl] = useState("");
    const [list, setList] = useState([]);

    useEffect(() => {

    }, [])


    useEffect(() => {
        const splitStr = JSON.parse(routerParams.url).split(",");
        console.log('splitStr', splitStr);
        getSpaceVideoListByIdRequest(splitStr[1])
            .then(res => {
                const tmpList = res.data?.videoList;
                setList(res?.data?.videoList)
                console.log('tmpList', tmpList);
                console.log('tmpList[splitStr[0]].videoUrl', tmpList[splitStr[0]]);
                setVideoUrl(tmpList[splitStr[0]].url);
            })
            .catch(err => {
                console.log('err', err)
            })
    }, []);

    return (
        <View style={styles.container}>
            <Stack.Screen
                options={{
                    title: '视频播放', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#f7f7f7', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                }}
            />
            <View style={{ width: "100%", height: "100%" }}>
                {
                    videoUrl && (
                        <WebView
                            source={{ uri: videoUrl }}
                            style={{ width: '100%', height: 360 }}
                            allowsFullscreenVideo
                        />
                    )
                }

                {
                    !videoUrl && (
                        <Empty title={"视频丢失～"} />
                    )
                }
            </View>

        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },
});

export default App;
